<template>
    <el-drawer v-model="isShow" :title="title" :destroy-on-close="true" size="50%" :close-on-press-escape="false"
        :close-on-click-modal="false" :show-close="false">
        <template #header="{ close, titleId, titleClass }">
            <h4 :id="titleId" :class="titleClass">{{ title }}</h4>
        </template>

        <el-form :model="form" label-width="auto" ref="formRef" :rules="rules">
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="设备名称">
                        <el-input v-model="inputservername" placeholder="请输入设备名称" :disabled="isButtonDisabled" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="设备厂商">
                        <el-select v-model="inputtype" :disabled="isButtonDisabled">
                            <el-option v-for="item in nj_device_type" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="通道名称" required prop="channelname">
                        <el-input v-model="form.channelname" placeholder="请输入通道名称" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="设备ID" required prop="channelcode">
                        <el-input v-model="form.channelcode" placeholder="请输入设备ID" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="通道ID" required prop="channels">
                        <el-input v-model="form.channels" placeholder="请输入通道ID" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="画面质量" required prop="imglevel">                      
                        <el-radio-group v-model="form.imglevel">
                            <el-radio-button v-for="item in nj_monitor_quantity" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-radio-group>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="是否女监">
                        <el-radio-group v-model="form.iswoman">
                            <el-radio-button v-for="item in sys_yes_no" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-radio-group>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <!-- <el-form-item label="通道是否可用" required prop="roomtypeId">
                        <el-select v-model="form.roomtypeId">
                            <el-option v-for="item in PassageTypeList" :key="item.roomtypeId" :label="item.name"
                                :value="item.roomtypeId" />
                        </el-select>
                    </el-form-item> -->
                    <el-form-item label="状态" required>
                        <el-radio-group v-model="form.state">
                            <!-- <el-radio v-for="(item, index) in sys_normal_disable" :key="'state' + index"
                                :value="item.value">{{
                                    item.label }}
                            </el-radio> -->
                            <el-radio-button v-for="item in sys_normal_disable" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-radio-group>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>

        <template #footer>
            <el-button type="primary" @click="submitHandle">提交</el-button>
            <el-button @click="isShow = false">关闭</el-button>
        </template>
    </el-drawer>
</template>

<script setup>
import { getCurrentInstance } from "vue";
import { getPassageList, createPassage, editPassage, getPassageInfo } from "@/api/ParameterSetting/Device";
import { listDept, } from "@/api/system/dept";
import { getUserProfile } from "@/api/system/user";
import { getPoliceAreaList, } from "@/api/PoliceAreaManage/PoliceAreaManage";

const { proxy } = getCurrentInstance()
const { sys_normal_disable, sys_yes_no, nj_device_type, nj_monitor_quantity } = proxy.useDict('sys_normal_disable', 'sys_yes_no', 'nj_device_type', 'nj_monitor_quantity')
// 是否显示抽屉
const isShow = ref(false)
// 抽屉标题
const title = ref('')
// 部门
const department = ref([])


// 通道类型
const PassageTypeList = ref([]);
// 通知事件
const emit = defineEmits(['getPassageList'])

const rules = {
    roomcode: [{ required: true, message: "通道编号不能为空", trigger: "blur" }],
    roomname: [{ required: true, message: "通道名称不能为空", trigger: "blur" }],
    unitId: [{ required: true, message: "所属单位不能为空", trigger: "blur" }],
    policeareaId: [{ required: true, message: "所在警务区不能为空", trigger: "blur" }],
    roomtypeId: [{ required: true, message: "通道类别不能为空", trigger: "blur" }]
}

// 通道
const form = ref({

    iswoman: '2',

    state: '0',
})

// 关闭后回调
const defaultQuery = {
    roomname: '',
    roomcode: '',
    roomtypeId: '',
    unitId: null,
    policeareaId: '',
    state: '0',
}
const deptqueryParams = ref({
    status: undefined,
})
const changeShowStatus = () => {
    isShow.value = !isShow.value
}
const isButtonDisabled = ref(false);

// 获取个人信息
const getUserInfo = async () => {
    await getUserProfile().then(res => {
        form.value.unitId = res.data.deptId
    })
}

const inputservername = ref()
const inputtype = ref()

// 添加通道
const showAddDrawer = (data) => {
    title.value = '添加通道';
    reset();
    isButtonDisabled.value = true;
    inputservername.value = data.servername;
    inputtype.value = data.type;
    form.value.iswoman = '2';
    form.value.imglevel = '1';
    form.value.monitorserverId = data.monitorserverId
    changeShowStatus()
}

// 修改通道 
const showEditDrawer = async (data) => {
    title.value = '修改通道'
    reset();
    isButtonDisabled.value = true;
    inputservername.value = data.servername;
    inputtype.value = data.type;
    await getPassageInfo(data.monitorchannelsId).then(res => {
        console.log(res.data)
        form.value = res.data


    })
    changeShowStatus()
}
defineExpose({ showAddDrawer, showEditDrawer })


// 表格属性
const Areapaging = ref({
    pageNum: 1,// 页码
    pageSize: 9999// 分页数量
})



onMounted(() => {
    getUserInfo()
})
const submitHandle = () => {
    // 必输校验--标签<el-form :model="form" label-width="auto" ref="formRef"  :rules="rules"> 添加ref="formRef" 属性 :rules="rules"绑定
    // 然后const rules = {里面是需要的rules}   在每个<el-form-item label="通道编号" required prop="对应字段">加上 prop="对应的字段"
    // submitHandle的时候先判断    proxy.$refs["formRef"].validate(valid => {
    // if (valid) {  valid true面执行具体代码逻辑     });}

    proxy.$refs["formRef"].validate(valid => {
        if (valid) {
            if (form.value['monitorchannelsId']) {
                editPassage(form.value).then(res => {
                    console.log(form.value)
                    changeShowStatus()
                    emit('getPassageList', '来了老弟')
                })
            } else {
                createPassage(form.value).then(res => {
                    changeShowStatus()
                    emit('getPassageList', '来了老弟')
                })
            }
        }

    });
}

// 关闭后的回调事件
const closeHandle = () => {
    form.value = defaultQuery
}
/** 重置操作表单 */
function reset() {
    form.value = {
        channelname: undefined,
        channelcode: undefined,
        channels: undefined,
        imglevel: undefined,
        channels: undefined,
        iswoman: undefined,
        state: '0',
    };
    proxy.resetForm("formRef");
};
/** 取消按钮 */
const cancel = () => {
    isShow.value = false
    reset();
}

</script>

<style lang="scss" scoped>
h4 {
    margin: 10px 0;
}
</style>